<template>
	<div
		class="sports-match-card h-[150px] flex flex-col rounded-lg relative text-white-500 text-sm"
		:class="[bgClass, bgImg]">
		<div class="flex items-start pt-[6px] px-2" v-if="data">
			<match-league
				:sportId="data.sportId"
				:league-id="data.leagueId"
				:leagueName="data.leagueName"
				class="flex-1 mr-5 app-font-bold" />
			<div class="flex items-center relative -top-[1px]">
				<template v-if="data.isLive">
					<match-live-logo class="text-white" />
					<match-live-time
						class="mx-[2px] text-white-500"
						:liveGameState="data.liveGameState"
						:sportId="data.sportId"
						:date="data.startEventDate" />
				</template>
				<template v-else>
					<match-time :date="data.startEventDate" />
					<match-date class="ml-1" :date="data.startEventDate" />
				</template>
			</div>
		</div>
		<div class="flex-1 px-4 flex items-center" v-if="data">
			<div class="flex-1 truncate pr-2">
				<base-image
					:src="data.homeIcon"
					type="server"
					default="sports/team-home"
					class="w-8"></base-image>
				<div class="mt-1 text-white app-font-bold truncate">
					{{ data.homeTeamName }}
				</div>
			</div>
			<div class="flex-1 truncate pl-2 text-right">
				<div>
					<base-image
						:src="data.awayIcon"
						type="server"
						default="sports/team-away"
						class="w-8"></base-image>
					<div class="mt-1 text-white app-font-bold truncate">
						{{ data.awayTeamName }}
					</div>
				</div>
			</div>
			<div
				class="absolute top-[50%] -translate-y-[90%] left-10 right-10 flex flex-col justify-center items-center">
				<match-live-video
					:channel="data.channel"
					:eventId="data.eventId"
					:sportId="data.sportId"
					class="w-6" />
				<match-live-stat-lite
					v-if="data.isLive"
					:home-score="data.scores.homeScore"
					:home-red-cards="data.scores.homeRedCards"
					:home-yellow-cards="data.scores.homeYellowCards"
					:home-corners="data.scores.homeCorners"
					:away-red-cards="data.scores.awayRedCards"
					:away-score="data.scores.awayScore"
					:away-yellow-cards="data.scores.awayYellowCards"
					:away-corners="data.scores.awayCorners" />
				<div>{{ marketTypeName }}</div>
			</div>
		</div>
		<slot name="footer"></slot>
	</div>
</template>

<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { Match } from '@/types'
import {
	MatchLeague,
	MatchLiveLogo,
	MatchLiveTime,
	MatchLiveVideo,
	MatchDate,
	MatchTime,
	MatchLiveStatLite
} from '@/components/match'
import { BaseImage } from '@/components/base'
import { SportsType } from '@/enums'

const props = defineProps({
	data: {
		type: Object as PropType<Match>
	},
	isSwiper: {
		type: Boolean
	}
})

const bgClass = computed(() => {
	if (props.isSwiper) {
		return 'bg-gradient-3'
	} else if (props.data?.isLive) {
		return 'bg-[#2F4072]'
	} else {
		return 'bg-[#546371]'
	}
})

const bgImg = computed(() => {
	let code = ''
	if (props.isSwiper && props.data?.sportId) {
		switch (props.data?.sportId) {
			case SportsType.football:
			case SportsType.fifa24:
				code = 'football'
				break
			case SportsType.basketball:
			case SportsType.nba2k:
				code = 'basketball'
				break
			case SportsType.tennis:
				code = 'tennis'
				break
			case SportsType.badminton:
				code = 'badminton'
				break
		}
	}
	return code
})

const marketTypeName = computed(() => {
	if (props.data?.markets.length) {
		return props.data.markets[0].marketTypeName
	}
	return ''
})
</script>

<style lang="scss" scoped>
.sports-match-card {
	background-size: cover;
	background-repeat: no-repeat;
	&.football {
		background-image: url(@/assets/img/sports/match-bg/football.png) !important;
	}
	&.basketball {
		background-image: url(@/assets/img/sports/match-bg/basketball.png) !important;
	}
	&.tennis {
		background-image: url(@/assets/img/sports/match-bg/tennis.png) !important;
	}
	&.badminton {
		background-image: url(@/assets/img/sports/match-bg/badminton.png) !important;
	}
}
</style>
